<template>
  <n-form
    ref="formRef"
    :model="model"
    :rules="rules"
    size="large"
    :show-label="false"
  >
    <n-form-item path="phone">
      <n-input v-model:value="model.phone" placeholder="请输入手机号" />
    </n-form-item>
    <n-form-item path="code">
      <div class="f-y-c w-full">
        <n-input v-model:value="model.code" placeholder="请输入验证码" />
        <div class="w-18"></div>
        <n-button
          size="large"
          :disabled="isCounting"
          :loading="smsLoading"
          @click="handleSmsCode"
        >
          {{ label }}
        </n-button>
      </div>
    </n-form-item>
    <n-form-item path="pwd">
      <n-input
        v-model:value="model.pwd"
        type="password"
        show-password-on="click"
        placeholder="请输入密码"
      />
    </n-form-item>
    <n-form-item path="confirmPwd">
      <n-input
        v-model:value="model.confirmPwd"
        type="password"
        show-password-on="click"
        placeholder="请再次输入密码"
      />
    </n-form-item>
    <n-space :vertical="true" size="large">
      <n-button
        type="primary"
        size="large"
        :block="true"
        :round="true"
        @click="handleSubmit"
      >
        确定
      </n-button>
      <n-button size="large" :block="true" :round="true" @click="router.back">
        返回
      </n-button>
    </n-space>
  </n-form>
</template>

<script lang="ts" setup>
import type { FormInst } from "naive-ui";
import { useSmsCode } from "@/hooks";
import { createRulesReset } from "../common";

const router = useRouter();

const { label, isCounting, loading: smsLoading, start } = useSmsCode();
const formRef = ref<HTMLElement & FormInst>();

const model = ref({
  phone: "",
  code: "",
  pwd: "",
  confirmPwd: "",
});
const rules = createRulesReset(toRef(model.value.pwd));

const handleSmsCode = () => {
  start();
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  window.$message?.success("验证成功");
};
</script>

<style scoped></style>
